<template>
  <!-- 指标项管理 -->
  <div class="centent">
    <div style="background-color: #FFFFFF;padding: 15px;">
      <div class="ipt_box">
        <div>
          <span style="margin-right: 5%;">指标项名称:</span>
          <el-input v-model="input" placeholder="请输入指标名称" clearable style="width: 40%;" />
          <el-button style="margin-left: 2%;" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </div>

        <div>
          <el-button style="margin-left: 5%;" type="primary" icon="el-icon-plus" @click="add">新增</el-button>
        </div>

      </div>
      <div>
        <el-upload
          class="upload-demo"
          :action="action"
          :on-change="handleChange"
          :on-success="fileUpOk"
          :on-error="fileUpErr"
          :file-list="fileList"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件，且不超过500kb</div>
        </el-upload>
      </div>
      <el-table :data="tableData" border style="width: 100%">

        <el-table-column prop="indexName" label="名称" />
        <el-table-column prop="indexDescribe" label="描述" />
        <el-table-column prop="indexScore" label="分数" />

        <el-table-column prop="createBy" label="创建人" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column prop="type" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" round @click="changezhibiao(scope.row, scope.$index)">修改</el-button>
            <el-button size="mini" type="danger" round @click="removeTodo(scope.row, scope.$index)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <div style="margin-left: 50%;margin-top: 10px;">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[ 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalcount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

    </div>
    <el-dialog title="新增指标项" :visible.sync="dialogFormVisible" center @close="close">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
        <el-form-item label="名称:" :label-width="formLabelWidth" prop="name">
          <el-input v-model="ruleForm.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="描述:" :label-width="formLabelWidth" prop="miaoshu">
          <el-input v-model="ruleForm.miaoshu" autocomplete="off" />
        </el-form-item>
        <el-form-item label="分值:" :label-width="formLabelWidth" prop="num">
          <el-input v-model.number="ruleForm.num" type="number" autocomplete="off" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog title="修改指标项" :visible.sync="dialogFormVisibles" center @close="close">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
        <el-form-item label="名称:" :label-width="formLabelWidth" prop="name">
          <el-input v-model="ruleForm.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="描述:" :label-width="formLabelWidth" prop="miaoshu">
          <el-input v-model="ruleForm.miaoshu" autocomplete="off" />
        </el-form-item>
        <el-form-item label="分值:" :label-width="formLabelWidth" prop="num">
          <el-input v-model.number="ruleForm.num" type="number" autocomplete="off" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetupdataForm">取 消</el-button>
        <el-button type="primary" @click="updataForm('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script>
import IP from '@/Yapi/config.js'
export default {
  data() {
    const checkValue = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('值不能为空'))
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'))
        } else {
          callback()
        }
      }, 200)
    }
    return {
      fileList: [],
      dialogFormVisible: false,
      dialogFormVisibles: false,
      action: `${IP.BEG_IP}xboot/hkAssessmentIndex/uploadFile`,
      ruleForm: {
        name: '',
        miaoshu: '',
        num: ''
      },
      rules: {
        name: [{
          required: true,
          message: '请输入指标名称',
          trigger: 'blur'
        }

        ],
        miaoshu: [{
          required: true,
          message: '请输入指标描述',
          trigger: 'blur'
        }],
        num: [
          { required: true, validator: checkValue, trigger: ['change', 'blur'] }

        ]

      },
      formLabelWidth: '120px',
      //  列表数据源
      tableData: [],
      // 当前分页位置
      currentPage: 1,
      pageSize: 10,
      totalcount: 0,
      // 搜索框
      input: '',
      // 记录修改那个
      changeid: null

    }
  },
  created() {
    this.getlist()
  },
  methods: {
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3)
    },
    fileUpOk() {
      this.$message.success('上传成功')
    },
    fileUpErr() {
      this.$message.error('上传失败')
    },
    // 修改取消
    resetupdataForm() {
      this.ruleForm.name = ''
      this.ruleForm.miaoshu = ''
      this.ruleForm.num = ''
      this.dialogFormVisibles = false
    },
    // 修改确定
    updataForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$Http.zhibiaoupdata({
            indexName: this.ruleForm.name, indexDescribe: this.ruleForm.miaoshu, indexScore: this.ruleForm.num, id: this.changeid
          }).then(res => {
            if (res.code === 200) {
              this.dialogFormVisibles = false
              this.$message({
                message: '修改成功!',
                type: 'success'
              })
              this.getlist()
            } else {
              this.$message({
                type: 'error',
                message: res.message
              })
            }
          }).catch(err => {
            console.log('err', err)
          })
        } else {
          this.$message({
            message: '修改失败!',
            type: 'error'
          })
          return false
        }
      })
    },
    // 修改
    changezhibiao(row, index) {
      this.changeid = row.id
      this.dialogFormVisibles = true
      this.$Http.zhibiaochange(row.id).then(res => {
        if (res.code === 200) {
          this.ruleForm.name = res.result.indexName
          this.ruleForm.miaoshu = res.result.indexDescribe
          this.ruleForm.num = res.result.indexScore
        }
      }).catch(err => {
        console.log('err', err)
      })
    },
    // 新增确定
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$Http.zhibiaoadd({ indexName: this.ruleForm.name, indexDescribe: this.ruleForm.miaoshu, indexScore: this.ruleForm.num }).then(res => {
            if (res.code === 200) {
              this.dialogFormVisible = false
              this.$message({
                message: '新增成功!',
                type: 'success'
              })
              this.getlist()
            }
          }).catch(err => {
            console.log('err', err)
          })
        } else {
          this.$message({
            message: '新增失败!',
            type: 'error'
          })
          return false
        }
      })
    },
    // 新增关闭
    close() {
      this.ruleForm.name = ''
      this.ruleForm.miaoshu = ''
      this.ruleForm.num = ''
    },
    // 新增取消
    resetForm() {
      this.ruleForm.name = ''
      this.ruleForm.miaoshu = ''
      this.ruleForm.num = ''
      this.dialogFormVisible = false
    },
    // 新增
    add() {
      this.change = 0
      this.dialogFormVisible = true
    },
    // 搜索
    search() {
      this.$Http.zhibiaosousuo({
        pageNumber: this.currentPage,
        pageSize: this.pageSize,
        indexName: this.input
      }).then(res => {
        if (res.code === 200) {
          this.totalcount = res.result.totalRows
          this.tableData = res.result.resultData
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      }).catch(err => {
        console.log('err', err)
      })
    },
    // 删除
    removeTodo(row, index) {
      this.$Http.zhibiaodelete(row.id).then(res => {
        if (res.code === 200) {
          this.tableData.splice(index, 1)
          this.$message({
            message: '删除成功!',
            type: 'success'
          })
        }
      }).catch(err => {
        console.log('err', err)
      })
    },
    // 获取列表
    getlist() {
      this.$Http.zhibiaolist({
        pageNumber: this.currentPage,
        pageSize: this.pageSize,
        indexName: this.input
      }).then(res => {
        console.log(res)
        if (res.code === 200) {
          this.totalcount = res.result.totalRows
          this.tableData = res.result.resultData
        }
      }).catch(err => {
        console.log('err', err)
      })
    },

    // 分页
    handleSizeChange(val) {
      this.pageSize = val
      this.getlist()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getlist()
    }
  }
}
</script>
<style lang="scss" scoped>
  .centent {
    padding: 25px;

    .ipt_box {
      width: 100%;
      padding: 15px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      span {
        text-align: center;
        padding-top: 0.6%;
        margin-left: 2%;
      }
    }
  }
</style>
